<template>
	<el-divider>水印</el-divider>
	<div class="form-item">
		<div class="label">启用水印</div>
		<el-switch v-model="settingStore.watermark.visible" :active-value="true" :inactive-value="false"></el-switch>
	</div>
	<div v-show="settingStore.watermark.visible">
		<div class="form-item">
			<div class="label">水印形式</div>
			<el-radio-group v-model="settingStore.watermark.type" size="small">
				<el-radio-button label="text">文字</el-radio-button>
				<el-radio-button label="image">图片</el-radio-button>
			</el-radio-group>
		</div>
		<div class="form-item" v-show="settingStore.watermark.type === 'text'">
			<div class="label">水印文字</div>
			<el-input
				type="text"
				size="small"
				v-model.lazy="settingStore.watermark.text"
				clearable
				@input="onInput"
			></el-input>
		</div>
		<div class="form-item" v-show="settingStore.watermark.type === 'image'">
			<div class="label">水印图片</div>
			<div class="upload" v-show="!url">
				<el-icon class="icon" size="12"><Plus /></el-icon>
				<input
					ref="uploadRef"
					type="file"
					class="upload-file"
					placeholder="请选择图片"
					@change="onUploadWatermark"
				/>
			</div>
			<div class="preview" v-show="url">
				<el-icon class="icon" size="12" @click="togglePreview"><Search /></el-icon>
				<el-icon class="icon" size="12" @click="clearUrl"><Close /></el-icon>
				<img :src="url" />
			</div>
		</div>
	</div>

	<el-image-viewer
		v-if="previewVisible"
		:url-list="[url]"
		hide-on-click-modal
		teleported
		@close="togglePreview"
	></el-image-viewer>
</template>

<script setup>
import { computed, shallowRef, watch } from "vue"
import { useSettingStore } from "/store/setting"
const settingStore = useSettingStore()

const previewVisible = shallowRef(false)
const url = computed({
	get() {
		return settingStore.watermark.url
	},
	set(value) {
		settingStore.watermark.url = value
		settingStore.watermark.content = value
	},
})

const uploadRef = shallowRef(null)
function onUploadWatermark() {
	const [file] = uploadRef.value.files
	uploadRef.value.value = null

	const fileData = new FileReader()
	fileData.readAsDataURL(file)
	fileData.onload = () => {
		if (typeof fileData.result === "string") {
			url.value = fileData.result
		}
	}
}
function onInput() {
	if (!settingStore.watermark.text) return
	const canvas = document.createElement("canvas")
	const ctx = canvas.getContext("2d")
	ctx.font = `20px sans-serif`
	const textWidth = ctx.measureText(settingStore.watermark.text).width + 150
	const textHeight = 120
	canvas.width = textWidth
	canvas.height = textHeight
	ctx.font = `20px sans-serif`
	ctx.textAlign = "center"
	ctx.textBaseline = "middle"
	ctx.fillText(settingStore.watermark.text, textWidth / 2, textHeight / 2)
	settingStore.watermark.content = canvas.toDataURL("image/png")
}
function togglePreview() {
	previewVisible.value = !previewVisible.value
}
function clearUrl() {
	url.value = ""
}

watch(
	() => settingStore.watermark.type,
	() => {
		if (settingStore.watermark.type === "text") {
			onInput()
		} else {
			settingStore.watermark.content = settingStore.watermark.url
		}
	}
)
</script>

<style lang="scss" scoped></style>
